/*
 * @Author: wuhaijun 
 * @Date: 2020-05-21 10:11:12 
 * @Last Modified by: wuhaijun
 * @Last Modified time: 2020-05-21 15:05:12
 */


//商品列表数据变量名
var arr = [];

//购物车存放数据的变量名
var cartArr = [];

//页面加载完成后执行
window.onload = function () {
	//将arr里存放的商品列表的数据渲染到页面 
	showGoodsList(getLocalGoodsListData());

	//将本地的购物车数据渲染显示到页面table
	render(getLocalCartData());
}


/**
 * @param {Object} arr
 * 功能：传入商品列表数据，将数据渲染到页面显示
 */
function showGoodsList(arr) {

	// 获取ul标签的元素节点
	var list_ul = document.querySelector(".list_ul");
	list_ul.innerHTML = "";

	//通过循环，和dom 操作，将每个li,都显示到
	for (var i = 0; i < arr.length; i++) {
		list_ul.innerHTML +=
			`
			<li data-id="${ arr[i].goodsid }">
				<img src="${ arr[i].image }" >
				<div class="good_title mt5">
					${ arr[i].name }
				</div>
				<div class="price mt5">
					${ arr[i].price }元
				</div>
				<button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
					加入购物车
				</button>
			</li>
		`;

	}

}



/**
 * @param {Object} goodsId
 * @param {Object} img
 * @param {Object} goodsName
 * @param {Object} price
 */
function addCart(goodsId, img, goodsName, price) {
	//默认点击添加购物车，默认是加1
	var count = 1;

	//商品的小计，价格*数量
	var xiaoji = price / 1 * count;

	//所有需要的信息 存放到对象里
	var obj = {
		id: goodsId,
		src: img,
		title: goodsName,
		price: price,
		count: count,
		xiaoji: xiaoji.toFixed(2),
		time: new Date().toLocaleTimeString()
	}

	addData(obj);

}

/**
 * @param {Object} obj、
 * 添加数据到购物车并渲染
 */
function addData(obj) {
	cartArr = getLocalCartData();
	var result = cartArr.some(function(item,index){
		return item.id === obj.id
	})
	if(result){
		jia(obj.id);
		return;
	}
	cartArr.push(obj);
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);

}

/**
 * @param {Object} cartArr
 * 渲染cartArr到购物车列表
 */
function render(cartArr) {
	var tbody = document.querySelector('tbody');
	tbody.innerHTML = "";
	var str = "";
	var sum = 0;
	for (var i = 0; i < cartArr.length; i++) {
		str += `
			
				<tr>
								<td>
									<input type="checkbox" name="" id="" value=""  class="danxuan" data-id="${ cartArr[i].id }"/>
								</td>
								<td>
									<p>
										<img src="${ cartArr[i].src }" >
										<br>
										<span>${ cartArr[i].title }</span>
									</p>
								</td>
								<td>
									<button type="button" class="btn" onclick="jian(${ cartArr[i].id })">-</button>
									<input disabled type="number" name="" id="" value="${ cartArr[i].count }" class="count"/>
									<button type="button" class="btn" onclick="jia(${ cartArr[i].id })">+</button>
								</td>
								<td>
									<span>${ cartArr[i].price }元</span>
								</td>
								<td>
									${ cartArr[i].xiaoji }
								</td>
								<td>
									<button type="button" onclick="del(${ cartArr[i].id })">删除</button>
								</td>
								<td>
									${ cartArr[i].time }
								</td>
								
							</tr>
		
		`
		sum = sum / 1 + cartArr[i].xiaoji / 1
	}

	tbody.innerHTML = str;
	document.getElementById("sum").innerHTML = sum;
}


/**
 * 获取本地购物车数据
 */
function getLocalCartData() {
	//三目运算的写法
	cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
	return cartArr;
}

/**
 * 获取本地的商品列表的数据
 */
function getLocalGoodsListData() {
	arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
	return arr;
}



/**
 * @param {Object} id
 * 点击-的业务逻辑
 */
function jian(id) {
	console.log("id:", id);
	//本地获取数据赋值给到cartArr
	cartArr = getLocalCartData();
	cartArr.forEach(function (item, index) {
		if (item.id == id) {
			if (item.count > 1) {
				item.count--;
				item.xiaoji = (item.count * item.price).toFixed(2);
			}
		}
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}

/**
 * @param {Object} id
 * 点击+号的业务逻辑，
 */
function jia(id) {
	console.log(id);
	cartArr = getLocalCartData();
	cartArr.forEach(function (item, index) {
		if (item.id == id) {
			item.count++;
			item.xiaoji = (item.count * item.price).toFixed(2);
		}
	});
	//本地数据的更新
	localStorage.cartArr = JSON.stringify(cartArr);
	//本地数据发生变化后，页面也要重新渲染
	render(cartArr);
}


/**
 * 
 * @param {id} 商品id   
 * 点击删除按钮，根据点击的商品的id,删除商品，并重新渲染
 */
function del(id) {

	cartArr = getLocalCartData();

	cartArr = cartArr.filter(function (item, index) {
		return item.id != id
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}


/**
 * 全选的功能
 */
var quanxuan = document.querySelector(".quanxuan");
quanxuan.onclick = function () {
	var danxuanList = document.querySelectorAll(".danxuan");
	for (let index = 0; index < danxuanList.length; index++) {
		danxuanList[index].checked = quanxuan.checked;
	}
}


var delChecked = document.getElementById("delChecked");
delChecked.onclick = function(){

	cartArr = getLocalCartData();
	var danxuanList = document.querySelectorAll(".danxuan:checked");
	for (let i = 0; i < danxuanList.length; i++) {
		
		cartArr.forEach(function(item,index){
			if(item.id === danxuanList[i].getAttribute("data-id")){
				cartArr.splice(index,1)
			}
		})
		
	}

	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}